<!-- pages/rollDice/rollDice.vue -->
<template>
    <view class="container">
        <view class="dice-info">
            <text class="dice-name">{{ currentDice.name }}</text>
            <text class="dice-faces">{{ currentDice.faces.length }}面骰子</text>
        </view>
        
        <view class="dice-display" @click="rollDice">
            <view class="dice-face">
                <text class="face-content">{{ currentFace.content }}</text>
            </view>
        </view>
        
        <button @click="rollDice" type="primary" class="roll-btn">投掷</button>
        
        <view class="history" v-if="history.length > 0">
            <text class="history-title">历史记录</text>
            <view class="history-list">
                <view 
                    v-for="(item, i) in history" 
                    :key="i" 
                    class="history-item"
                >
                    <text>{{ item.content }}</text>
                    <text class="history-time">{{ formatTime(item.time) }}</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { useDiceStore } from '@/store'
import { storeToRefs } from 'pinia'

const diceStore = useDiceStore()
const { dices } = storeToRefs(diceStore)

const index = ref(0)
const history = ref([])
const isRolling = ref(false)
const currentFace = ref({ content: '' })

const currentDice = computed(() => {
    return dices.value[index.value] || { name: '', faces: [{ content: '' }] }
})

onLoad((options) => {
    index.value = Number(options.index)
    if (currentDice.value.faces.length > 0) {
        currentFace.value = currentDice.value.faces[0]
    }
})

function rollDice() {
    if (isRolling.value) return

    isRolling.value = true
    const faces = currentDice.value.faces
    const duration = 2000 // 动画持续时间(ms)
    const interval = 100  // 切换间隔(ms)
    let count = 0

    const timer = setInterval(() => {
        currentFace.value = faces[Math.floor(Math.random() * faces.length)]
        count++

        if (count * interval >= duration) {
            clearInterval(timer)
            isRolling.value = false

            const resultIndex = Math.floor(Math.random() * faces.length)
            currentFace.value = faces[resultIndex]

            history.value.unshift({
                content: currentFace.value.content,
                time: new Date().getTime()
            })

            if (history.value.length > 10) {
                history.value.pop()
            }
        }
    }, interval)
}

function formatTime(timestamp) {
    const date = new Date(timestamp)
    return `${date.getHours()}:${date.getMinutes().toString().padStart(2, '0')}:${date.getSeconds().toString().padStart(2, '0')}`
}
</script>

<style>
.container {
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.dice-info {
    text-align: center;
    margin-bottom: 30px;
}
.dice-name {
    display: block;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 8px;
}
.dice-faces {
    font-size: 16px;
    color: #666;
}
.dice-display {
    width: 200px;
    height: 200px;
    border: 2px solid #007AFF;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 30px;
    background-color: #f8f8f8;
    cursor: pointer;
    transition: transform 0.1s;
}
.dice-display:active {
    transform: scale(0.95);
}
.dice-face {
    text-align: center;
    padding: 20px;
}
.face-content {
    font-size: 24px;
    font-weight: bold;
    word-break: break-word;
}
.roll-btn {
    margin-top: 20px;
    width: 200px;
}
.history {
    margin-top: 40px;
    width: 100%;
    max-width: 400px;
}
.history-title {
    display: block;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 15px;
    text-align: center;
}
.history-list {
    border-top: 1px solid #eee;
}
.history-item {
    padding: 12px 0;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.history-time {
    font-size: 12px;
    color: #999;
}
</style>